<template>
  <header-bar></header-bar>
  <div class="container">
    <el-dialog v-model="dialogVisualFlag" @close="closeDialog" :lock-scroll="false">
      <el-switch
          v-model="showEmoji"
          active-color="#13ce66"
          active-text="emoji模式">
      </el-switch>
      <h4>点赞数:{{ praiseNumber }}</h4>
      <el-row style="margin-bottom: 5px" type="flex" justify="center" align="middle">
        <el-button @click="praiseFromID">{{ showEmoji ? '👍' : '点赞' }}</el-button>
        <el-button @click="gotoSingleImage">{{ showEmoji ? '🔍' : '原图' }}</el-button>
      </el-row>
      <el-row style="margin-bottom: 5px" type="flex" justify="center" align="middle">
        <el-button @click="starPicFromID" type="success">{{ showEmoji ? '✨' : '精选' }}</el-button>
        <el-button @click="r12PicFromID" type="danger">{{ showEmoji ? '🔞' : '不涩' }}</el-button>
      </el-row>
      <el-row style="margin-bottom: 5px" type="flex" justify="center" align="middle">
        <el-button @click="deactivateFromID" type="danger">{{ showEmoji ? '🗑' : '隐藏' }}</el-button>
      </el-row>
    </el-dialog>
    <div class="gray-row">
      <div class="text">探索</div>
    </div>
    <Waterfall
        :list="imagesData.list"
        :breakpoints="{
        1200: { rowPerView: 4 },
        800: { rowPerView: 3 },
        500: { rowPerView: 2 },
      }"
        :width="384"
        :gutter="10"
    >
      <template #item="{ item }">
        <el-card :body-style="{ padding: '0px' }">
          <LazyImg :url="item.url" @click="clickImgHandler(item.id)"/>
        </el-card>
      </template>
    </Waterfall>
    <div v-if="showDivider">
      <el-divider>无法自动加载？</el-divider>
      <el-button type="primary" round @click="getMoreImg">获取更多图图</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {LazyImg, Waterfall} from "vue-waterfall-plugin-next";
// import "vue-waterfall-plugin-next/style.css";
import "vue-waterfall-plugin-next/dist/style.css";
import {
  choosePicByID,
  deactivateImageByID,
  getPraiseNumberByIDApi,
  getWaterfallPicInfosList,
  praiseImageByID,
  r12PicByID,
} from "@/api";
import {onBeforeMount, onMounted, reactive, ref} from "vue";
import {ImageReturnInfo} from "@/types";
import {onBeforeRouteLeave, useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
import HeaderBar from "@/components/HeaderBar.vue";

const showDivider = ref(false);
const showEmoji = ref(false);
const imagesData = reactive({
  list: new Array<ImageReturnInfo>(),
});

const dialogVisualFlag = ref(false);
const selectImgID = ref(0);
const praiseNumber = ref(0);
let load = true;


setTimeout(() => {
  showDivider.value = true
}, 1000);


const getMoreImg = () => {
  getWaterfallPicInfosList(50).then((res) => {
    imagesData.list = imagesData.list.concat(res.data.picture_infos);
    load = false;
  });
}

onBeforeMount(() => {
  // 这个fetch方法需要按照需求改进，否则会造成严重的卡顿
  getWaterfallPicInfosList(50).then((res) => {
    console.log(res.data.picture_infos);
    imagesData.list = res.data.picture_infos;
    load = false;
  });
});

onMounted(() => {
  // window.addEventListener("scroll", () => {
  //   // 监听滚动条位置
  //   let body = document.documentElement || document.body;
  //   let scrollTop = body.scrollTop; // 获取距离顶部的距离
  //   let windowHeight = body.clientHeight; // 获取可视区的高度
  //   let scrollHeight = body.scrollHeight; // 获取滚动条的总高度
  //   if (scrollTop + windowHeight >= scrollHeight && !load) {
  //     console.log("到底了，正在获取更多的图图");
  //     load = true;
  //     let pics: number[] = [0];
  //     imagesData.list.map((item) => pics.push(item.id));
  //     // console.log(pics)
  //     getWaterfallPicInfosList(50, JSON.stringify(pics)).then((res) => {
  //       imagesData.list = imagesData.list.concat(res.data.picture_infos);
  //       load = false;
  //     });
  //   }
  // }, false);
});

const router = useRouter();

const closeDialog = () => {
  selectImgID.value = 0;
  praiseNumber.value = 0;
};

const r12PicFromID = () => {
  ElMessageBox({
    message: "是否标记为非R18图片？之后图片只会在青少年模式中展示！",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    beforeClose(action: string, instance: any, done: any) {
      if (action === 'confirm') {
        r12PicByID(selectImgID.value).then((res) => {
          console.log(res.data);
          ElMessage({
            message: "标记为小孩子都能看的图图!",
            type: "success",
          });
        });
        done();
      } else {
        done();
      }
    }
  }).catch(() => {
  });

}

const starPicFromID = () => {
  ElMessageBox({
    message: "是否精选这张图图？之后图片会展示到管理员严选页面。",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    beforeClose(action: string, instance: any, done: any) {
      if (action === 'confirm') {
        choosePicByID(selectImgID.value).then((res) => {
          console.log(res.data);
          ElMessage({
            message: "选得好哇!!!",
            type: "success",
          });
        });
        done();
      } else {
        done();
      }
    }
  }).catch(() => {
  });

};

const praiseFromID = () => {
  praiseImageByID(selectImgID.value).then((res) => {
    praiseNumber.value = res.data;
    ElMessage({
      message: "瑟瑟之力!!!",
      type: "success",
    });
  });
};

const deactivateFromID = () => {
  ElMessageBox({
    message: "AI画的不好？点击确定隐藏这张图图，不再出现。（可以在复活区恢复）",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    beforeClose(action: string, instance: any, done: any) {
      if (action === 'confirm') {
        deactivateImageByID(selectImgID.value).then((res) => {
          console.log(res.data);
          dialogVisualFlag.value = false;
          //关闭对话框
          ElMessage({
            message: "吵到我的眼睛了!",
            type: "warning",
          });
        });
        done();
      } else {
        done();
      }
    }
  }).catch(() => {
  });

};

const gotoSingleImage = () => {
  router.push(`/pic/${selectImgID.value}`);
};

const clickImgHandler = (id: number) => {
  dialogVisualFlag.value = true;
  selectImgID.value = id;
  getPraiseNumberByIDApi(selectImgID.value).then((res) => {
    praiseNumber.value = res.data;
  });
};

</script>

<style scoped lang="less">
.container {
  margin: 0 auto;
  width: 1200px;
}
.gray-row {
  background-color: #f5f5f5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  .text {
    font-weight: 700;
  }
}

@media screen and (max-width: 1200px) {
  .container {
    width: 100%;
  }
}

</style>
